<script lang="ts">
export default {
  name: "RepoCompEditDialog"
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog :close-on-click-modal="false" :model-value="visible" :title="dataState.title" min-width="200px"
             @close="handleCancel">

    <!-- 数据表单 -->
    <el-form ref="dataFormRef" :model="dataState.formData" :rules="dataState.rules" label-width="80px">

      <!-- 编辑框：制造厂商 -->
      <el-form-item label="提交密码" prop="commitKey">
        <el-input v-model="dataState.formData.commitKey"
                  :show-password="false"
                  placeholder="请输入密码"
        />
      </el-form-item>

      <!-- 编辑框：设备类型 -->
      <el-form-item label="更新描述" prop="description">
        <el-input v-model="dataState.formData.description"/>
      </el-form-item>

    </el-form>

    <!-- 脚部：确认/取消按钮-->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";

import {ElForm} from "element-plus";
import {RepoCompEntity} from "@/api/repo/comp/local/types";

const props = defineProps(['visible']);
const emit = defineEmits(['create', 'update', 'cancel']); //注意：这个是父组件<dict-type-edit>标签上的@close
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initEditData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '提交版本',
  // 表单数据
  formData: {
    id: 0,
    commitKey: '',
    description: '',
  },

  // 对话框的各控件输入规则
  rules: {
    commitKey: [{required: true, message: '参数不能为空', trigger: 'blur'}],
    description: [{required: true, message: '参数不能为空', trigger: 'blur'}],
  },
});

function handleCancel() {
  emit('cancel', "子组件传给父组件的值");
}

function handleSubmit() {
  if (dataState.formData.commitKey === '' || dataState.formData.description === ''){
    return;
  }
  if (dataState.formData.commitKey === dataState.formData.description){
    return;
  }

  emit('create', dataState.formData);
}

function initEditData(entity: RepoCompEntity) {
  dataState.formData.id = entity.id as number;
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>
